<template>
    <view>
		
		<u-back-top
				:scroll-top="scrollTop" 
				icon="arrow-up" 
				:icon-style="iconStyle" 
				bottom="200" 
				:custom-style="customStyle" 
				tips="顶部" 
				top="1000">
		</u-back-top>
	
		<!-- 活动列表 -->
		<view class="content">
		
			<view class="center_box_bg" v-for="(item, index) in contentList" :key="item.id">
				<view class="profily" @click="activity_info(item)">
					<view class="activity">
						<view class="activity_title">
							<text >{{item.activityTitle}}</text>
						</view>
						<!-- 发布者 -->
						<view class="user">
							<view v-if="item.headUrl" style="display: flex;" @click="user_info(item.userId)">
								<image class="header" :src="item.headUrl"></image>
								<text class="text">{{item.realName}} </text>
								<text class="text">({{item.majorClass}})</text>
							</view>
							
							<view v-else style="display: flex;">
								<u-icon name="home" color="#6c6c6c" size="28"></u-icon>
								<text class="text">本平台发布</text>
								
							</view>
						</view>
						
						<view class="activity_content">
							<div class='u-line-3'>
								<view class="u-content" >
									<u-parse  v-if="item.imageUrlList" style='width: 220px;' :html="item.detailedDescription" :selectable="true"></u-parse>
									<u-parse v-else :html="item.detailedDescription" :selectable="true"></u-parse>
								</view>
							</div>
							
							<div v-if="item.imageUrlList">
								<!-- <image v-if="item.imageUrlList" class="help_image" :src="item.imageUrlList[0]"></image> -->
								<image class="activity_image"
								   mode="aspectFill" 
								   :src="item.imageUrlList[0]"
									@error="imageError">
								</image>
							</div>
						</view>
						<view class="activity_zan">
							<view style="margin-right: 10px; color: #193867; font-size: 14px;">
								{{item.classificationName}}
							</view>
							<view style="margin-right: 10px;">
								<u-icon size="30" name="thumb-up-fill" style="margin-right: 3px;"></u-icon> {{item.supportNumber}}
							</view>
							<view style="margin-right: 10px;">
								<u-icon size="30" name="star-fill" style="margin-right: 3px;"></u-icon> {{item.collectionNumber}}
							</view>
							
							{{item.createTime}}
						</view>
					</view>
				</view>
			</view>

		</view>
		
			
    </view>
</template>

<script>
    export default {
        data() {
            return {
				/* 返回顶部 */
				scrollTop: 0,
				customStyle:{
					backgroundColor: '#a0cfff',
					color: '#2979ff'
				},
				iconStyle: {
 					color: '#2979ff',
 					fontSize: '34rpx'
 				},
				
				contentList: [],
				params: {
					page: 1,
					size: 10,
					applyUid: this.$store.state.vuex_user.openId,
				},
            }
        }, 
        onLoad() {
			//#ifdef H5
			this.$u.toast("H5不支持此功能")
			//#endif
			
			// #ifdef MP
				if (!this.$u.utils.isLogin()) return
			// #endif
			this.getDate()
        },
        methods: {
			async getDate() {
				await this.$u.api.applyActivityList(this.params).then(res =>  {
					console.log("报名活动列表",res.data);
					if(res.code!="200") {
						uni.showToast({
							icon:"none",
							title:"获取失败，请重试"
						})
					} else if(this.params.page==1){
						this.contentList = res.data
					} else {
						 this.contentList = [...this.contentList, ...res.data]
					}
				})
			},
			//触底事件
			onReachBottom() {
				//重新请求数据，带上分页参数
				this.getDate()	
			},
			//上拉刷新
			onPullDownRefresh() {
				//置空后重新获取第一页
				this.contentList = {}
				this.params.page = 1
				this.getDate()
				setTimeout(function () {
					uni.stopPullDownRefresh();
				}, 1000);
			},
			//返回顶部
			onPageScroll(e) {
				this.scrollTop = e.scrollTop;
			},
			activity_info(activityInfo) {
				uni.navigateTo({
					url: '/pages/activity/activity_info?activityInfo=' + encodeURIComponent(JSON.stringify(activityInfo)),
				})
			}
        }
    }
</script>

<style lang="scss">

	.user {
		margin-top: 20rpx;
		.header {
			border-radius: 50%;
			width: 30rpx; 
			height: 30rpx; 
			margin-top: 5rpx;
		}
		.text {
			font-size: 25rpx;
			margin-left: 15rpx;
			color: #bfbfbf;
		}
	}

    .content {
        height: 100vh;
		background-color: #f2f2f2;
    }
	.center_box_bg {
		background-color: #f2f2f2;
		display: flex;
		padding-top: 13px;
		.profily {
			positio: absolute;
			width: 90%;
			// height: 180px;
			display: flex;
			border:1px solid #F7F7F7;
			border-radius: 10px;
			margin: 0 auto;
			top: -100upx;
			left: 5%;
			background: #FEFEFE;
			padding: 35upx;
			box-sizing: border-box;
			box-shadow: 0px 0px 5px #bebebe;
		}
	}
	.activity {
		.activity_title {
			display: flex;
			font-weight: 800; 
			font-size: 15px; 
			/* margin-left: 25px; */
			width: 330px;
		}
		.activity_content {
			font-size: 14px;
			/* margin-left: 25px; */
			margin-top: 10px; 
			display: flex;
			height: 55px;
			// position: relative; /* 置图层底*/	
		}
		.activity_zan {
		/* 	margin-left: 25px; */
			margin-top: 20px; 
			color: #bfbfbf; 
			display: flex;
		}
		.activity_image {
			width: 200rpx;
			height: 120rpx; 
			background-color: #eeeeee; 
			border-radius: 10px;
			background-color: rgba(135, 135, 135, 0.5);
		}
	}
	
</style>